<template>
	<view>
		<view class="head_bg">
			<view class="nav_name">服务</view>
		</view>
		<view class="content">
			<view class="wrap">
				<view class="" style="margin-top: 30rpx; padding: 0 20rpx;">基础服务</view>
				<view class="one">
					<view class="item_info bg-purple" @click="zaixian">
						<image src="../../static/images/iconimg/baoshi.png" mode=""></image>
						<view>在线报装</view>
					</view>
				</view>
				
				<view class="" style="margin-top: 60rpx; padding: 0 20rpx;">社区服务</view>
				<view class="one">
					<view class="item_info bg-purple" @click="bianmin"> 
						<image src="../../static/images/iconimg/fuwu.png" mode=""></image>
						<view class="">便民电话</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import SwiperTabHead from '../../components/common/swiper_tab_head.vue'
	// import LivingPay from '../../components/index/livingPay_item.vue'
	export default {
		data() {
			return {

			}
		},
		created() {
			// #ifdef APP-PLUS
			uni.loadFontFace({
				family: 'DINPro-Medium',
				// 本地字体路径需转换为平台绝对路径
				source: `url(${plus.io.convertLocalFileSystemURL('_www/static/DINPro-Medium.ttf')})`,
				success() {},
				fail(e) {}
			})
			// #endif
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height;
				}
			});

		},
		methods: {
			zaixian() {
				uni.navigateTo({
					url:"zaixianweixiu"
				})
				console.log("在线报修")
			},
			bianmin() {
				console.log("便民电话")
				uni.navigateTo({
					url:"bianmingfuwu"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.head_bg {
		width: 100%;
		height: 304rpx;
		background-image: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))
	}

	.nav_name {
		color: #FFFFFF;
		font-size: 36rpx;
		padding-top: 50rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.content {
		padding: 0 40rpx;
		z-index: 1;
		position: absolute;
		width: 96%;
		height: 100%;
		margin: -100rpx 2% 0 2%;
		background: #fff;
		box-shadow: 0 4rpx 20rpx 0 rgba(99, 251, 172, 0.35);
		border-radius: 10rpx;

		.wrap {
			padding: 20rpx 0 0 0;
			height: 100%;
		}

		.item_info {
			width: 25%;
			height: auto;
			margin-top: 50rpx;
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-size: 26rpx;
				color: #000;
			}
		}
	}

	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;

		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 100upx);
		}

		.list {
			width: 750upx;
			height: 100%;
		}
	}

	.nothing {
		color: #B3B3B3;
		width: 100%;
		height: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>
